<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui" template="/templates/manageui.xhtml">

	<ui:define name="customStyle">
		<style type="text/css">
.testreg {
	vertical-align: top;
}

.setWidth {
	width: 155px;
}
</style>
	</ui:define>
	<ui:define name="content">
		<!-- <div id="dataPage"> -->
		<div class="entry" style="text-align: left;">
			<!-- <div class="entry"> -->

			<h:form id="signUpForm">
				<p:fieldset styleClass="fieldset" legend="Registration Form">
					<p:focus />

					<h:panelGrid columns="2" columnClasses=",testreg">





						<!-- will removed this comment later for upload picture -->
						<h:panelGrid id="regPanelGrid"
							style="text-align: left; margin: 25px 10px 40px;width:425px;border-right: 1px solid rgb(235, 235, 235);"
							cellspacing="8" columns="2" columnClasses="setWidth,">

							<!-- <h:panelGrid id="regPanelGrid"
							style="text-align: left; margin: 25px 10px 40px;"
							cellspacing="8" columns="2"> -->

							<!-- first Name -->
							<h:panelGroup>
								<h:outputText value="First Name:" />
								<h:outputText style="color:red" value="*  " />
							</h:panelGroup>
							<p:inputText id="firstName" label="First Name"
								value="#{registerBean.regUser.firstName}" required="true"
								requiredMessage="You can't leave this empty."
								title="Enter your First Name!">
								<f:validateLength minimum="2" />
								<p:ajax event="keyup" update="firstNameMsg" global="false" />
							</p:inputText>

							<h:outputText value="" />
							<h:panelGroup>
								<p:message id="firstNameMsg" for="firstName" />
								<p:tooltip for="firstName" styleClass="tooltip"
									showEvent="focus" hideEvent="blur" />
							</h:panelGroup>

							<!-- last name -->
							<h:panelGroup>
								<h:outputText value="Last Name:" />
								<h:outputText style="color:red" value="*  " />
							</h:panelGroup>
							<p:inputText id="lastName" label="Last Name"
								value="#{registerBean.regUser.lastName}" required="true"
								requiredMessage="You can't leave this empty."
								title="Enter your Last Name!">
								<f:validateLength minimum="2" />
								<p:ajax event="keyup" update="lastNameMsg" global="false" />
							</p:inputText>

							<h:outputText value="" />
							<h:panelGroup>
								<p:message id="lastNameMsg" for="lastName" />
								<p:tooltip for="lastName" styleClass="tooltip" showEvent="focus"
									hideEvent="blur" />
							</h:panelGroup>

							<!-- login Name (userName)-->
							<h:panelGroup>
								<h:outputText value="User Name:" />
								<h:outputText style="color:red" value="*  " />
							</h:panelGroup>
							<p:inputText id="userName"
								value="#{registerBean.regUser.username}" required="true"
								requiredMessage="You can't leave this empty." label="User Name"
								title="Enter your User Name!">
								<f:validateLength minimum="2" />
								<p:ajax event="keyup" update="userNameMsg" global="false"
									listener="#{userService.checkAvailable}" />
							</p:inputText>

							<h:outputText value="" />
							<h:panelGroup>
								<p:message id="userNameMsg" for="userName" />
								<p:tooltip for="userName" styleClass="tooltip" showEvent="focus"
									hideEvent="blur" />
							</h:panelGroup>

							<!-- password -->
							<h:panelGroup>
								<h:outputText value="Enter Password:" />
								<h:outputText style="color:red" value="*  " />
							</h:panelGroup>
							<p:password id="pass1" value="#{registerBean.regUser.password}"
								required="true" label="Password"
								title="Please enter a password!"
								requiredMessage="You can't leave this empty." feedback="true"
								match="pass2">
								<f:validateLength minimum="2" />
							</p:password>

							<h:outputText value="" />
							<p:message id="pass1Msg" for="pass1" />

							<!-- password again -->
							<h:panelGroup>
								<h:outputText value="Repeat Password:" />
								<h:outputText style="color:red" value="*  " />
							</h:panelGroup>
							<p:password id="pass2" required="true" label="Password"
								requiredMessage="Confirm your password here. "
								title="Please enter a password!" />

							<h:outputText value="" />
							<p:message id="pass2Msg" for="pass2" />

							<!-- email address -->
							<h:panelGroup>
								<h:outputText value="Email Address:" />
								<h:outputText style="color:red" value="*  " />
							</h:panelGroup>
							<p:inputText id="emailAddress" label="Email Address"
								value="#{registerBean.regUser.email}" required="true"
								requiredMessage="You can't leave this empty."
								title="Enter your Email Address!">
								<f:validateLength minimum="2" />
								<p:ajax event="keyup" update="emailAddressMsg" global="false" />
							</p:inputText>

							<h:outputText value="" />
							<h:panelGroup>
								<p:message id="emailAddressMsg" for="emailAddress" />
								<p:tooltip for="emailAddress" styleClass="tooltip"
									showEvent="focus" hideEvent="blur" />
							</h:panelGroup>

							<!-- gender -->
							<h:panelGroup>
								<h:outputText value="Gender:" />
								<h:outputText style="color:red;display:none" value="*  " />
							</h:panelGroup>
							<p:selectOneMenu value="#{registerBean.regUser.gender}"
								style="width:135px;text-align:left;" title="select your gender"
								id="gender">
								<f:selectItem itemLabel="Select" itemValue="" />
								<f:selectItem itemLabel="Male" itemValue="M" />
								<f:selectItem itemLabel="Female" itemValue="F" />
								<f:validateLength minimum="1" />
								<p:ajax event="keyup" update="genderMsg" global="false" />
							</p:selectOneMenu>

							<h:outputText value="" />
							<h:panelGroup>
								<p:message id="genderMsg" for="gender" />
								<p:tooltip for="gender" styleClass="tooltip" showEvent="focus"
									hideEvent="blur" />
							</h:panelGroup>

							<!-- dirthday -->
							<h:panelGroup>
								<h:outputText value="Date of birth:" />
								<h:outputText style="color:red;display:none" value="*  " />
							</h:panelGroup>
							<p:inputMask id="birthday" label="birthday"
								value="#{registerBean.regUser.dob}" mask="99/99/9999"
								title="Enter your birthday!">
								<p:ajax event="keyup" update="birthdayMsg" global="false" />
							</p:inputMask>

							<h:outputText value="" />
							<h:panelGroup>
								<p:message id="birthdayMsg" for="birthday" />
								<p:tooltip for="birthday" styleClass="tooltip" showEvent="focus"
									hideEvent="blur" />
							</h:panelGroup>

							<!-- question -->
							<h:panelGroup>
								<h:outputText value="secret question:" />
								<h:outputText style="color:red;display:none" value="*  " />
							</h:panelGroup>
							<p:inputMask id="question" label="question"
								value="#{registerBean.regUser.secretQuestion}"
								title="Enter your secret question!">
								<p:ajax event="keyup" update="questionMsg" global="false" />
							</p:inputMask>

							<h:outputText value="" />
							<h:panelGroup>
								<p:message id="questionMsg" for="question" />
								<p:tooltip for="question" styleClass="tooltip" showEvent="focus"
									hideEvent="blur" />
							</h:panelGroup>

							<!-- answer -->
							<h:panelGroup>
								<h:outputText value="secret Answer:" />
								<h:outputText style="color:red;display:none" value="*  " />
							</h:panelGroup>
							<p:inputMask id="answer" label="answer"
								value="#{registerBean.regUser.secretAnswer}"
								title="Enter your secret question answer!">
								<p:ajax event="keyup" update="answerMsg" global="false" />
							</p:inputMask>

							<h:outputText value="" />
							<h:panelGroup>
								<p:message id="answerMsg" for="answer" />
								<p:tooltip for="answer" styleClass="tooltip" showEvent="focus"
									hideEvent="blur" />
							</h:panelGroup>

							<!-- interest -->
							<h:panelGroup>
								<h:outputText value="your interests:" />
								<h:outputText style="color:red;display:none" value="* " />
							</h:panelGroup>
							<p:inputMask id="interests" label="interests"
								value="#{registerBean.regUser.custInterests}"
								title="Enter your interests!">
								<p:ajax event="keyup" update="interestsMsg" global="false" />
							</p:inputMask>

							<h:outputText value="" />
							<h:panelGroup>
								<p:message id="interestsMsg" for="interests" />
								<p:tooltip for="interests" styleClass="tooltip"
									showEvent="focus" hideEvent="blur" />
							</h:panelGroup>

						</h:panelGrid>



						<h:panelGrid>
							<!-- will removed this comment later for upload picture -->
							<p:panel
								style="height:500px;width:450px;background:none;border: none;">
								<div style="text-align: center; margin-top: 20px;">
									<!-- one -->
									<h:outputText
										style="COLOR: #ff8040; FONT-FAMILY: 'Arial'; FONT-SIZE: large;"
										value="One account is all you need" />
									<br />
									<p:spacer style="width:100% ;height:10px"></p:spacer>
									<h:outputText
										value="A single username and password gets you into everything Sniffex."
										style="FONT-SIZE: small; FONT-FAMILY: 'Arial';COLOR: #ff8040;" />
									<p:spacer style="width:100% ;height:10px"></p:spacer>
									<img width="311px" height="24px"
										src="#{request.contextPath}/images/logo_strip_sign_up_2x.png"></img>
									<p:spacer style="width:100% ;height:30px"></p:spacer>

									<!-- two -->
									<h:outputText
										style="COLOR: #ff8040; FONT-FAMILY: 'Arial'; FONT-SIZE: large;"
										value=" Make Sniffex yours " />
									<br />
									<p:spacer style="width:100% ;height:10px"></p:spacer>
									<h:outputText
										value="Set up your profile and preferences just the way you like. "
										style="FONT-SIZE: small; FONT-FAMILY: 'Arial';COLOR: #ff8040;" />
									<p:spacer style="width:100% ;height:10px"></p:spacer>
									<img width="300px" height="124px"
										src="#{request.contextPath}/images/profiles_2x.png"></img>
									<p:spacer style="width:100% ;height:30px"></p:spacer>

									<!-- Three -->
									<h:outputText
										style="COLOR: #ff8040; FONT-FAMILY: 'Arial'; FONT-SIZE: large;"
										value=" Take it all with you  " />
									<br />
									<p:spacer style="width:100% ;height:10px"></p:spacer>
									<h:outputText
										value="Switch between devices, and pick up wherever you left off.  "
										style="FONT-SIZE: small; FONT-FAMILY: 'Arial';COLOR: #ff8040;" />
									<p:spacer style="width:100% ;height:10px"></p:spacer>
									<img width="300px" height="172px"
										src="#{request.contextPath}/images/devices_2x.png"></img>

								</div>



							</p:panel>
						</h:panelGrid>




					</h:panelGrid>







					<h:panelGrid id="buttonGrid"
						style="text-align: right; margin: 0px 33% 0px" cellspacing="8"
						columns="3">
						<p:commandButton id="backToSignIn" action="login?faces-redirect=true" immediate="true"
							icon="ui-icon-arrowreturnthick-1-w" value="Back to Login" />
							<!-- gobal -->
						<!-- <p:commandButton id="submitButton"
							action="#{registerBean.doNextStep()}" icon="ui-icon-check"
							update=":growl" value="Next Step" /> -->
						<p:commandButton id="submitButton"
							action="nextStep?faces-redirect=true" icon="ui-icon-check"
							update="signUpForm" value="Next Step" />
					</h:panelGrid>

				</p:fieldset>


			</h:form>





		</div>
		<!-- </div> -->
	</ui:define>
</ui:composition>